<template>
  <div ref="fileReadWrap" class="w-100 p_relative" style="background: #dee2e6">
    <el-carousel :interval="5000" arrow="always" class="text-center " style="overflow-y: hidden">
      <el-carousel-item  v-for="(file,index) in files" :key="index"  >
        <!--图片预览 -->
        <template v-if="file.OriginUrl.indexOf('.pdf')==-1">
          <img  :src="server+file.OriginUrl" class="h-100">
        </template>
       <!--pdf预览 -->
        <template v-else>
          <iframe :src="server+file.OriginUrl" frameborder="0"  class="w-100 h-100" ref="iframe">
            <p>您的浏览器不支持预览。</p>
          </iframe>
        </template>
        <i v-if="showDel&&limits.indexOf(delFileLimit)!=-1" class="iconfont icon-shanchu1 text-warning" @click="delFile(file,index)"
           style="font-size:20px;font-weight:800;position: absolute;right: 6px; top:10px;line-height: normal"></i>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>

  import api from 'api/api'
  import {mapState} from 'vuex'
  export default {
    components: {},
    props: {
      files:{
        type:Array,
        default:function () {
          return []
        }
      },
      delFileLimit:'',
      height:0,
      showDel:false
    },
    data() {
      return {
        server:api.ajaxServe,
      }
    },
    watch: {},
    computed: {
      ...mapState({
        clientHeight: state => state.comm.clientHeight,
        clientWidth: state => state.comm.clientWidth,
        limits: state => state.user.userInfo.limits
      }),
    },
    methods: {
      delFile(file,index) {//删除附件
        this.$emit('delFile',{file:file,index:index})
      }
    },
    created() {
    },
    mounted() {
      this.$refs.fileReadWrap.style.height=this.height+'px'
      // this.$refs.iframe[0].src=this.server+this.files[0].OriginUrl
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
